<template>
  <!-- websocketceshi -->
  <div class="layout">
    <div class="msgBody">{{ msg }}</div>
    <input
      v-model="sendMsg"
      style="width: 200px; height: 30px; margin-top: 20px"
    />
    <button @click="websocketsend(sendMsg)" style="width: 100px; height: 30px">
      发送
    </button>
    <button @click="websocketclose" style="width: 100px; height: 30px">
      断开链接
    </button>
    <button @click="initWebSocket" style="width: 100px; height: 30px">
      建立链接
    </button>

    <!-- <video ref="videoPlayer" controls width="640" height="360"></video> -->
  </div>
</template>

<script>
export default {
  name: "LayOut",
  data() {
    return {
      websock: null, //建立的连接
      lockReconnect: false, //是否真正建立连接
      timeout: 20 * 1000, //20秒一次心跳
      timeoutObj: null, //心跳心跳倒计时
      serverTimeoutObj: null, //心跳倒计时
      timeoutnum: null, //断开 重连倒计时
      msg: "", //显示的值
      sendMsg: "", //输入框的值
      videoElement: null,
    };
  },
  created() {
    // //页面刚进入时开启长连接
    this.initWebSocket();
  },
  destroyed() {
    //页面销毁时关闭长连接
    this.websocketclose();
  },
  methods: {
    //建立连接，初始化weosocket
    initWebSocket() {
      //后台地址，前面的ws不动，后面是后台地址，我是本地运行的所以填的本地，自行更改。再后面webSocket是后端的接口地址，admin是参数
      const wsuri = "ws://127.0.0.1:3570/ruoyi-vue-service/webSocket/admin";


      //建立连接
      this.websock = new WebSocket(wsuri);

      this.websock.binaryType = 'arraybuffer';
      //连接成功
      this.websock.onopen = this.websocketonopen;
      //连接错误
      this.websock.onerror = this.websocketonerror;
      //接收信息
      this.websock.onmessage = this.websocketonmessage;
      //连接关闭
      this.websock.onclose = this.websocketclose;
    },
    reconnect() {
      //重新连接
      var that = this;
      //判断链接状态，true就是链接，false是断开，这里如果是链接状态就不继续执行了，跳出来。
      if (that.lockReconnect) {
        return;
      }
      //把链接状态改为true
      that.lockReconnect = true;
      //没连接上会一直重连，设置延迟避免请求过多
      that.timeoutnum && clearTimeout(that.timeoutnum);
      that.timeoutnum = setTimeout(function () {
        //初始化新连接
        that.initWebSocket();
        //把链接状态改为false
        that.lockReconnect = false;
      }, 5000);
    },
    reset() {
      //重置心跳
      var that = this;
      //清除时间
      clearTimeout(that.timeoutObj);
      clearTimeout(that.serverTimeoutObj);
      //重启心跳
      that.start();
    },
    start() {
      //开启心跳
      var self = this;
      //有延迟时间的就清除掉
      self.timeoutObj && clearTimeout(self.timeoutObj);
      self.serverTimeoutObj && clearTimeout(self.serverTimeoutObj);
      //从新创建计时器
      self.timeoutObj = setTimeout(function () {
        //这里发送一个心跳，后端收到后，返回一个心跳消息
        if (self.websock.readyState == 1) {
          //如果连接正常发送信息到后台
          self.websock.send("ping");
        } else {
          //否则重连
          self.reconnect();
        }
        self.serverTimeoutObj = setTimeout(function () {
          //超时关闭
          self.websock.close();
        }, self.timeout);
      }, self.timeout);
    },
    //链接成功时执行的方法
    websocketonopen() {
      //连接成功事件
      this.websocketsend("发送数据");
      //提示成功
      console.log("连接成功", 3);
      //开启心跳
      this.start();
    },
    //连接失败事件
    websocketonerror(e) {
      //错误
      console.log("WebSocket连接发生错误");
      //重连
      this.reconnect();
    },
    //连接关闭事件
    websocketclose(e) {


      this.websock.close();
      //提示关闭
      console.log("连接已关闭");
      //重连
      // this.reconnect();
      // this.websocketclose();
    },
    //接收服务器推送的信息
    websocketonmessage(event) {
      //打印收到服务器的内容
      console.log("收到服务器信息", event.data);
      // this.videoElement = this.$refs.videoPlayer;
      // if (event.data instanceof ArrayBuffer) {
      //   const byteArray = new Uint8Array(event.data);
      //   const blob = new Blob([byteArray], { type: 'video/mp4' });
      //   const url = URL.createObjectURL(blob);

      //   console.log("123412:"+url)
      //   this.videoElement.src = url;
      // }
      // this.$refs.videoPlayer.play()
      this.msg = event.data;
      // 收到服务器信息，心跳重置
      // this.reset();
    },
    websocketsend(msg) {
      //向服务器发送信息
      this.websock.send(msg);
    },
  },
  mounted() {
    // this.videoElement = document.getElementById('video');
    this.ws = new WebSocket('ws://192.168.3.30:3570/ruoyi-vue-service/videoSocket');

    this.ws.binaryType = 'arraybuffer';

    // this.ws.onmessage = event => {
    //   this.videoElement = this.$refs.videoPlayer;
    //   if (event.data instanceof ArrayBuffer) {
    //     const byteArray = new Uint8Array(event.data);
    //     const blob = new Blob([byteArray], {type: 'video/mp4'});
    //     const url = URL.createObjectURL(blob);

    //     this.videoElement.src = url;
    //   }
    //   this.videoElement.play();
    // };

  }
};
</script>
<style scoped>
.layout {
  position: relative;
  width: 100%;
  height: 100%;
}
.msgBody {
  width: 500px;
  height: 300px;
  border: 1px solid rgb(95, 79, 79);
}
</style>

